<template>
	<view>
		<u-navbar title="订单详情" :bgColor="bgColor" leftIconColor="#fff" :titleStyle="titleStyle"></u-navbar>
		<u-loading-page :loading="loading"></u-loading-page>
		<view v-if="!loading">
			<view class="bg"></view>
			<view class="list">
				<view class="item ddxx">
					<view class="label">
						{{$z.$t("订单信息")}}
					</view>
					<u-button type="warning" text="已取消" v-if="query.sjyys && !query.sjcds "
						style="width: auto; margin: 0" size="mini"></u-button>
					<u-button type="primary" text="已完成" v-else style="width: auto; margin: 0" size="mini"></u-button>
				</view>

				<view class="item" :class="{noafter:key+1==list.length}" v-for="(item,key) in list" :key="key">
					<view class="">
						{{item.label}}
					</view>
					<view class="value u-line-1">
						{{item.value}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				bgColor: "#2093f5",
				titleStyle: {
					color: "#fff"
				},
				query: {},
				paymentTypes: {
					0: '微信支付',
					1: '支付宝支付',
					2: '余额支付',
					3: '卡支付',
					5: '站点消费卡',
					8: '宝付微信支付',
					9: '宝付支付宝支付'
				},
				cancelyy: false,
			}
		},
		onLoad(query) {
			this.query = query
			if (query.sjyys && !query.sjcds) {
				//是否取消预约
				this.cancelyy = true
			}
			console.log('this.query123', this.query, query.sjyys, query.sjcds)
			this.init()
		},
		computed: {
			yysc() {
				if (!this.query.sjyys || !this.query.sjyye) return '0分钟';

				const start = new Date(this.query.sjyys.replace(/-/g, '/'));
				const end = new Date(this.query.sjyye.replace(/-/g, '/'));
				const diff = end.getTime() - start.getTime();

				// 计算总分钟数
				const totalMinutes = Math.floor(diff / (1000 * 60));
				if (totalMinutes <= 0) return '0分钟';

				// 计算天/小时/分钟
				const days = Math.floor(totalMinutes / (60 * 24));
				const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
				const minutes = totalMinutes % 60;

				// 格式化输出
				let result = '';
				if (days > 0) result += `${days}天`;
				if (hours > 0) result += `${hours}小时`;
				if (minutes > 0 || result === '') result += `${minutes}分钟`;

				return result;
			},
			cdsj() {
				if (!this.query.sjcds) {
					return '0'
				}
				if (!this.query.sjcde) {
					return ''
				}
				// 充满自停
				return this.$z.timefn.getUTCtimeceil(this.query.sjcds, this.query.sjcde) + "分钟"
			},
			list() {
				console.log('this.query', this.query)
				let query = this.query
				let ffftypelist = [22, 23, 31, 32, 33, 34]
				let r = [{
					label: this.$z.$t("订单编号"),
					value: query.ddh
				}]
				// let shje = 0
				// if (query.refundJe) {
				// 	if (query.jezw - query.refundJe < 0) {
				// 		shje = 0
				// 	} else {
				// 		shje = (query.jezw - query.refundJe) / 100
				// 	}

				// } else {
				// 	shje = query.jezw / 100
				// }
				if (this.query.sjyys) {
					r.push({
						label: this.$z.$t("预约开始时间"),
						value: query.sjyys
					}, {
						label: this.$z.$t("预约结束时间"),
						value: query.sjyye
					}, {
						label: this.$z.$t("免费时长"),
						value: query.caryymfsc + this.$z.$t("分钟")
					}, {
						label: this.$z.$t("预约时长"),
						value: this.yysc
					}, {
						label: this.$z.$t("预约应付超时金额"),
						value: query.jeyy / 100 + this.$z.$t("元")
					}, {
						label: this.$z.$t("收费时长"),
						value: query.sczw + this.$z.$t("分钟")
					}, {
						label: this.$z.$t("实付超时金额"),
						value: query.jezw / 100 + this.$z.$t("元")
						// value: query.refundJe ?
						// 	(query.jezw - query.refundJe) / 100 + this.$z.$t("元") : (query.jezw - query.refundJe) <
						// 	0 ?
						// 	0 : query.jezw / 100 + this.$z.$t("元")
					})
				}
				if (!this.cancelyy) {
					r.push({
						label: query.sjyys ? this.$z.$t("开始充电时间") : this.$z.$t("开始时间"),
						value: query.sjcds || query.sjc
					}, {
						label: this.query.sjyys ? this.$z.$t("结束充电时间") : this.$z.$t("结束时间"),
						value: query.sjcde
					}, {
						label: this.$z.$t("充电时长"),
						value: this.cdsj
					})
				}
				r.push({
					label: this.$z.$t("设备ID"),
					value: query.gtel
				}, {
					label: this.$z.$t("枪号"),
					value: this.$z.tdxs(query.td) + this.$z.$t("枪")
				}, {
					label: this.$z.$t("站点名称"),
					value: query.pcsxs
				}, {
					label: query.sftype == 1 ? this.$z.$t("电量") : this.$z.$t("总电量"),
					value: this.$z.dlxs(query.dl) + this.$z.$t("度")
				})
				r.push({
					label: this.$z.$t("支付方式"),
					value: this.paymentTypes[query.payType]
				}, {
					label: this.$z.$t("支付时间"), //query.sjyys ? query.sjcds : 
					value: query.sjc
				})
				if (this.cancelyy) {
					r.push({
						label: this.$z.$t("支付金额"),
						value: (Number(query.jtcs) / 100 + Number(query.jeyy) / 100) + this.$z.$t("元")
					}, {
						label: this.$z.$t("电费金额"),
						value: (Number(query.je) / 100 - Number(query.jezw) / 100) + this.$z.$t("元")
					}, {
						label: this.$z.$t("退款金额"), //+ query.jeyy  jezw
						value: query.jezw / 100 == 0 ? (Number(query.jtcs) / 100) + Number(query.jeyy) / 100 + this
							.$z.$t("元") : (Number(query.jtcs) / 100 + Number(query.jeyy) / 100 - Number(query
								.jezw) / 100) + this.$z.$t("元")
					}, {
						label: this.$z.$t("退款时间"),
						value: query.sjcde
					})
				}

				// let ycglcss = ''
				// if (ffftypelist.includes(Number(query.type))) {
				// 	ycglcss = Number(query.ycglcss) / 100
				// } else {
				// 	ycglcss = query.je / 100
				// }
				// const ffftypelist = [22, 23, 31, 32, 33, 34]
				let df = 0
				let server = 0
				if (query.jetk && query.jetk != "0" && !this.cancelyy) {
					if (ffftypelist.includes(Number(query.type))) {
						if (query.je == 0) {
							df = 0
						}
						if (Number(query.je) < Number(query.ycglcss)) {
							df = Number(query.je) / 100
						} else if (query.je == Number(query.ycglcss) + Number(query.ycglcs)) {
							df = Number(query.ycglcss) / 100
						} else {
							df = Number(query.ycglcss) / 100
						}
					} else {
						df = Number(query.je) / 100
					}
					if (ffftypelist.includes(Number(query.type))) {
						if (query.je == 0) {
							server = 0
						}
						if (Number(query.ycglcss) >= query.je) {
							server = 0
						} else if (query.je >= Number(query.ycglcss) + Number(query.ycglcs)) {
							server = Number(query.ycglcs) / 100
						} else {
							server = (Number(query.je) - Number(query.ycglcss)) / 100
						}
					} else {
						server = 0
					}
					r.push({
						label: this.$z.$t("支付金额"),
						value: (Number(query.jetk) + Number(query.je)) / 100 + this.$z.$t("元")
					}, {
						label: this.$z.$t("总金额"),
						value: Number(query.je) / 100 + this.$z.$t("元")
					}, {
						label: this.$z.$t("电费金额"),
						value: df + this.$z.$t("元")
					}, {
						label: this.$z.$t("服务费金额"),
						value: server + this.$z.$t("元")
					}, {
						label: this.$z.$t("退款金额"),
						value: Number(query.jetk) / 100 + this.$z.$t("元")
					}, {
						label: this.$z.$t("退款时间"),
						value: query.refundTime ? query.refundTime : query.sjcde
					})
					console.log('时间', query.refundTime, query.sjcde)

				} else {
					if (!this.cancelyy) {
						r.push({
							label: this.$z.$t("电费金额"),
							value: Number(query.je) / 100 + this.$z.$t("元")
						})
					}
				}
				if (query.sftype == 12 || query.sftype == 14) {
					// if (query.gtype == '2' && query.rjbb >= 21) {
					// 	r.push({
					// 		label: this.$z.$t("电费金额"),
					// 		value: Number(query.ycglcss) / 100 + this.$z.$t("元")
					// 	}, {
					// 		label: this.$z.$t("服务费"),
					// 		value: Number(query.ycglcs) / 100 + this.$z.$t("元")
					// 	})
					// }
					console.log('query.gtype', query.gtype)
					if (query.gtype == '62' || query.gtype == '61') {
						if (query.jdl > 0) {
							r.push({
								label: this.$z.$t("尖峰电量"),
								value: query.jdl + this.$z.$t("度")
							}, {
								label: this.$z.$t("尖峰电费金额"),
								value: query.jje + this.$z.$t("元")
							}, {
								label: this.$z.$t("尖峰服务费金额"),
								value: query.jff + this.$z.$t("元")
							})
						}
						if (query.fdl > 0) {
							r.push({
								label: this.$z.$t("高峰电量"),
								value: query.fdl + this.$z.$t("度")
							}, {
								label: this.$z.$t("高峰电费金额"),
								value: query.fje + this.$z.$t("元")
							}, {
								label: this.$z.$t("高峰服务费金额"),
								value: query.fff + this.$z.$t("元")
							})
						}
						if (query.pdl > 0) {
							r.push({
								label: this.$z.$t("平峰电量"),
								value: query.pdl + this.$z.$t("度")
							}, {
								label: this.$z.$t("平峰电费金额"),
								value: query.pje + this.$z.$t("元")
							}, {
								label: this.$z.$t("平峰服务费金额"),
								value: query.pff + this.$z.$t("元")
							})
						}
						if (query.gdl > 0) {
							r.push({
								label: this.$z.$t("谷峰电量"),
								value: query.gdl + this.$z.$t("度")
							}, {
								label: this.$z.$t("谷峰电费金额"),
								value: query.gje + this.$z.$t("元")
							}, {
								label: this.$z.$t("谷峰服务费金额"),
								value: query.gff + this.$z.$t("元")
							})
						}
					}
				}
				return r
			}
		},
		methods: {
			async init() {
				if (this.query.ddh) {
					let GetRfCD = await this.$z.request("/GetRfCD", {
						ddh: this.query.ddh,
					});
					GetRfCD = GetRfCD.length == 1 ? GetRfCD[0] : {};
					this.query = {
						...this.query,
						...GetRfCD
					}
				}

				let item = this.query
				let ChargeCarSys = await this.$store.dispatch("request/getRequest", {
					url: "/ChargeCarSys",
					data: {
						gtel: item.gtel,
					},
				});
				ChargeCarSys = ChargeCarSys[0];
				let StationCar = await this.$store.dispatch("request/getRequest", {
					url: "/Station",
					data: {
						id: ChargeCarSys.pcs,
					},
				});
				let station = StationCar[0] || {}; // 防止undefined
				let GetRfCDZF = await this.$z.request("/GetRfCDZF", {
					ddh: this.query.ddh
				});
				let payType = ''
				if (GetRfCDZF.length == 0) {
					payType = 2
				} else {
					payType = GetRfCDZF[0].type

				}
				let obj = {}
				console.log('ChargeCarSys', ChargeCarSys)
				if (ChargeCarSys.gtype == 61 || ChargeCarSys.gtype == 62) {
					let chargeCarRfEnd = await this.$z.request("/ChargeCarRfEnd", {
						ddh: this.query.ddh
					});
					if (chargeCarRfEnd && chargeCarRfEnd.length > 0) {
						chargeCarRfEnd = chargeCarRfEnd[0];
						obj = {
							jdl: chargeCarRfEnd.jdl == 0 ? 0 : Math.round((Number(chargeCarRfEnd.jdl) /
									10000) *
								10000) / 10000,
							jje: chargeCarRfEnd.jje - chargeCarRfEnd.jff == 0 ? 0 : Math.round(
								chargeCarRfEnd.jje -
								chargeCarRfEnd.jff) / 100,
							jff: chargeCarRfEnd.jff == 0 ? 0 : Math.round(chargeCarRfEnd.jff) / 100,
							fdl: chargeCarRfEnd.fdl == 0 ? 0 : Math.round((chargeCarRfEnd.fdl /
									10000) * 10000) /
								10000,
							fje: chargeCarRfEnd.fje - chargeCarRfEnd.fff == 0 ? 0 : Math.round(
								chargeCarRfEnd.fje -
								chargeCarRfEnd.fff) / 100,
							fff: chargeCarRfEnd.fff == 0 ? 0 : Math.round(chargeCarRfEnd.fff) / 100,
							pdl: chargeCarRfEnd.pdl == 0 ? 0 : Math.round((chargeCarRfEnd.pdl /
									10000) * 10000) /
								10000,
							pje: chargeCarRfEnd.pje - chargeCarRfEnd.pff == 0 ? 0 : Math.round(
								chargeCarRfEnd.pje -
								chargeCarRfEnd.pff) / 100,
							pff: chargeCarRfEnd.pff == 0 ? 0 : Math.round(chargeCarRfEnd.pff) / 100,
							gdl: chargeCarRfEnd.gdl == 0 ? 0 : Math.round((chargeCarRfEnd.gdl /
									10000) * 10000) /
								10000,
							gje: chargeCarRfEnd.gje - chargeCarRfEnd.gff == 0 ? 0 : Math.round(
								chargeCarRfEnd.gje -
								chargeCarRfEnd.gff) / 100,
							gff: chargeCarRfEnd.gff == 0 ? 0 : Math.round(chargeCarRfEnd.gff) / 100,
						}
					}
				}
				let ChargeCar = await this.$z.request("/ChargeCar", {
					gtel: this.query.gtel
				});
				ChargeCar = ChargeCar[0]
				let GetRfChargeuserCarYY
				if (this.query.sjyys) {
					GetRfChargeuserCarYY = await this.$z.request("/GetRfChargeuserCarYY", {
						ddh: this.query.ddh
					});
					GetRfChargeuserCarYY = GetRfChargeuserCarYY[0]
				}
				let RecCDtkLog = await this.$z.request("/RecCDtkLog", {
					...this.query
				});
				let refundTime = ''
				let refundJe = 0;
				if (RecCDtkLog.length > 0) {
					refundTime = RecCDtkLog[0].sjtk,
						refundJe = RecCDtkLog.reduce((sum, item) => {
							// 确保金额是数字类型（处理字符串或空值）
							const amount = parseFloat(item.je) || 0;
							return sum + amount;
						}, 0);
				}
				console.log('refundJe', refundJe, refundTime)
				this.query = {
					...this.query, // 保留原有query
					pcsxs: station.pcs || "",
					sftype: ChargeCarSys.type || "", // 收费模式 1电量 12阶梯 14地锁阶梯
					gtype: ChargeCarSys.gtype || "",
					payType: payType, //支付类型
					rjbb: ChargeCar.rjbb, //软件版本
					refundTime: refundTime, //退款时间
					refundJe: refundJe,
					...obj,
					...GetRfChargeuserCarYY, //预约充电的数据
				};
				this.loading = false
				// this.$forceUpdate();
				// this.$set(this.query, 'pcsxs', StationCar[0].pcs || "")
				// this.$forceUpdate()

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f7f8;
	}

	.bg {
		height: 240rpx;
		background: #2093f5;
		// position: fixed;
		top: 80rpx;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.list {
		margin: 0rpx 30rpx;
		margin-top: -200rpx;
		background: #fff;
		border-radius: 10rpx;
		padding-bottom: 20rpx;

		.item {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			position: relative;
			color: #666666;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}

			.value {
				width: 0;
				flex: auto;
				text-align: right;
			}
		}

		.ddxx {
			height: 100rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: bold;

			.label {
				display: flex;

				&:before {
					content: "";
					width: 8rpx;
					height: 28rpx;
					background: #2093f5;
					border-radius: 4rpx;
					display: block;
					margin-right: 8rpx;
					position: relative;
					top: 2rpx;
				}
			}

		}
	}

	.noafter {
		&::after {
			display: none;
		}
	}
</style>